<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
          <FormItem label="主键" prop="wid">
            <Input type="number" v-model.number="form.wid" />
          </FormItem>
          <FormItem label="关联后台登入账号" prop="uid">
            <Input type="number" v-model.number="form.uid" />
          </FormItem>
          <FormItem label="openid" prop="openid">
            <Input type="number" v-model.number="form.openid" />
          </FormItem>
          <FormItem label="nick_name" prop="nickName">
            <Input v-model="form.nickName" />
          </FormItem>
          <FormItem label="avatar_url" prop="avatarUrl">
            <Input v-model="form.avatarUrl" />
          </FormItem>
          <FormItem label="gender" prop="gender">
            <Input v-model="form.gender" />
          </FormItem>
          <FormItem label="city" prop="city">
            <Input v-model="form.city" />
          </FormItem>
          <FormItem label="province" prop="province">
            <Input v-model="form.province" />
          </FormItem>
          <FormItem label="country" prop="country">
            <Input v-model="form.country" />
          </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
  import { usersApi } from '@/api/weapp-users';
  export default {
    name: 'UsersListForm',
    components: {
    },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      updateData: {
        type: Object
      }
    },
    data() {
      return {
        //表单数据
        form: {
         //主键
         wid:null,
         //关联后台登入账号
         uid:null,
         //openid
         openid:null,
         //nick_name
         nickName:null,
         //avatar_url
         avatarUrl:null,
         //gender
         gender:null,
         //city
         city:null,
         //province
         province:null,
         //country
         country:null,
        },
        //表单验证
        formValidate: {
        //主键
        wid:[{ type:'number',required: true, message: '请输入主键', trigger: 'blur' }],
        //关联后台登入账号
        uid:[{ type:'number',required: true, message: '请输入关联后台登入账号', trigger: 'blur' }],
        //openid
        openid:[{ type:'number',required: true, message: '请输入openid', trigger: 'blur' }],
        //nick_name
        nickName:[{ required: true, message: '请输入nick_name', trigger: 'blur' }],
        //avatar_url
        avatarUrl:[{ required: true, message: '请输入avatar_url', trigger: 'blur' }],
        //gender
        gender:[{ required: true, message: '请输入gender', trigger: 'blur' }],
        //city
        city:[{ required: true, message: '请输入city', trigger: 'blur' }],
        //province
        province:[{ required: true, message: '请输入province', trigger: 'blur' }],
        //country
        country:[{ required: true, message: '请输入country', trigger: 'blur' }],
        }
      };
    },
  watch: {
      updateData: function(newValue, oldValue) {
          this.$refs['form'].resetFields();
          if (this.isUpdate) {
              for (let k in this.form) {
                  this.$set(this.form, k, newValue[k]);
              }
              this.$set(this.form, 'id', newValue['id']);
          }
      },
      isUpdate: function(newValue, oldValue) {
          if (!newValue) {
              this.resetForm();
              this.$refs['form'].resetFields();
          }
      }
  },
    created() {},
    mounted() {},
    methods: {
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.isUpdate) {
            this.update();
           } else {
             this.add();
           }
         } else {
          this.$Message.error('参数验证错误，请仔细填写表单数据!');
         }
       });
      },
    resetForm() {
        this.form = {
          //主键
          wid:null,
          //关联后台登入账号
          uid:null,
          //openid
          openid:null,
          //nick_name
          nickName:null,
          //avatar_url
          avatarUrl:null,
          //gender
          gender:null,
          //city
          city:null,
          //province
          province:null,
          //country
          country:null,
        };
        this.$refs['form'].resetFields();
      },
      async add() {
        this.$Spin.show();
        let res = await usersApi.addUsers(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
      async update() {
        this.$Spin.show();
        let res = await usersApi.updateUsers(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      }
    }
  };
</script>